<script setup lang="ts">
import useCompute from '@renderer/composables/useCompute'
import formButton from '@renderer/components/formButton.vue'
import { useRouter } from 'vue-router'
import helper from '@renderer/utils/helper'
import useComputeForm from '@renderer/composables/useComputeForm'
import { ElMessage } from 'element-plus'
const route = useRouter()
const pageQuery = route.currentRoute.value.query
const handleExport = async () => {
  const res = await exportMaterialsTable({
    calculate_id: pageQuery.calculate_id,
    type: 5,
  })
  downLoadFile(res, '墙漆材料单.xlsx')
}
const initPage = async () => {
  await getCalculateDetail({ calculate_id: pageQuery.calculate_id })
  if (calculateInfo.value?.check_gather == 2 || !checkRule('成本明细查看权')) {
    ElMessage({ type: 'error', message: '抱歉！您没有此权限' })
    return
  }
  await getCalculateMaterialsInfo({
    calculate_id: pageQuery.calculate_id,
    type: 5,
  })
}
const { getCalculateMaterialsInfo, MaterialList, exportMaterialsTable } = useCompute()
const { downLoadFile, checkRule } = helper()
const { calculateInfo, getCalculateDetail } = useComputeForm()
await initPage()
</script>

<template>
  <main class="bg-white flex flex-col" style="height: -webkit-fill-available">
    <div class="flex flex-1 justify-center" v-if="calculateInfo?.check_gather == 2 || !checkRule('成本明细查看权')">
      <el-empty
        image="https://cw3.obs.cn-north-4.myhuaweicloud.com/api/uploads/images/b1ed1d14709b890118b4c2b3da9114b351e11b9d.png"
        description="抱歉！您没有此权限" />
    </div>
    <section v-else class="flex flex-col overflow-hidden">
      <div
        class="px-6 h-[50px] border-b flex items-center bg-white"
        style="width: -webkit-fill-available">
        <div class="flex gap-3">
          <formButton @click="handleExport">导出</formButton>
        </div>
      </div>
      <div class="flex flex-col gap-3 p-6 pt-4 overflow-y-auto flex-1">
        <div class="flex flex-col gap-1 items-center">
          <div class="font-bold text-2xl text-black">墙漆材料单</div>
          <div class="text-sm text-[#888888]">工程地址：{{ pageQuery.calculate_name }}</div>
        </div>
        <el-table
          :data="MaterialList"
          border
          header-align="center"
          :header-cell-style="{ background: '#FFF4E5', fontSize: '14px', color: '#888', fontWeight: '400' }">
          <el-table-column type="index" label="序号" align="center" width="55" />
          <el-table-column prop="name" label="材料名称" align="center" width="180" />
          <el-table-column prop="unit" label="单位" align="center" width="80" />
          <el-table-column prop="number" label="数量" align="center" width="80" />
          <el-table-column prop="remark" label="备注" align="center"/>
        </el-table>
      </div>
    </section>
  </main>
</template>

<style lang="scss"></style>
